<template>
  <div class="">
    <Button class="m-r-5px" size="small" type="primary" @click="openCompinfoForm('add', null, compinfoTypeId)"><Icon type="md-add"/> 创建组件信息
    </Button>
    <Tooltip placement="top" content="刷新数据">
      <Button class="m-r-5px" type="primary" size="small" @click="loadCompinfos">
        <Icon type="md-refresh"/>
      </Button>
    </Tooltip>
    <ButtonGroup>
      <Button size="small" type="primary" @click="exportCompinfo">
        <Icon type="md-cloud-download"/>
        导出为JSON数据
      </Button>
      <Button size="small" type="primary" @click="importJsonModalVisible = !importJsonModalVisible">
        <Icon type="md-cloud-upload"/>
        导入JSON数据
      </Button>
    </ButtonGroup>
    <div class="m-b-10px"></div>
    <Table ref="compinfoTable" :columns="columns" :data="tableData" :loading="loading"></Table>
    <Page size="small" class="m-t-5px float-right" :total="pageTotal" :current.sync="pageIndex" :page-size="pageSize"
          show-elevator show-total @on-change="loadCompinfos">
    </Page>

    <CompinfoForm ref="compinfoForm" @refreshDataList="loadCompinfos"></CompinfoForm>

    <Modal
        v-model="exportToJsonModalVisible"
        title="导出为JSON数据">
      <Input v-model="compinfoSelectedJsonText" type="textarea" :rows="10" placeholder="" readonly/>
      <div slot="footer">
        <Button type="primary" @click="copyCompinfoSelectedJsonText">复制</Button>
      </div>
    </Modal>
    <Modal
        v-model="importJsonModalVisible"
        title="导入JSON数据">
      <Input v-model="importJsonText" type="textarea" :rows="10" placeholder="请将系统导出的JSON数据粘贴至此"/>
      <div slot="footer">
        <Button type="primary" @click="importJson">导入</Button>
      </div>
    </Modal>

  </div>
</template>

<script>
import CompinfoForm from './CompinfoForm'

import ManageMixin from '../../../../mixin/ManageMixin'

export default {
  name: 'CompinfoTypeTableExpand',
  mixins: [ManageMixin],
  components: {
    CompinfoForm
  },
  props: {
    compinfoTypeId: {
      type: String,
      require: true
    }
  },
  data() {
    return {
      node_env: process.env.NODE_ENV,

      loading: false,
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '缩略图',
          align: 'center',
          width: 120,
          render: (h, params) => {
            return h('div', [
              h('img', {
                attrs: {
                  src: this.thumbnailPath(params.row.thumbnail_uri)
                },
                style: {
                  width: '85px',
                  height: '50px',
                  marginTop: '5px',
                  backgroundColor: '#616161',
                  borderRadius: '4px',
                  padding: '5px'
                },
                on: {}
              })
            ]);
          }
        },
        {
          title: '组件文件名',
          // width: 220,
          key: 'name'
        },
        {
          title: '归类',
          key: 'classify',
          width: 120
        },
        {
          title: '别名',
          key: 'alias_name',
          width: 150
        },
        /*{
          title: '描述',
          key: 'remark'
        },*/
        {
          title: '状态',
          key: 'enabled',
          align: 'center',
          width: 90,
          render: (h, params) => {
            if (params.row.enabled == '1') {
              return h('span', {
                style: {
                  color: '#19be6b'
                }
              }, '已激活')
            } else if (params.row.enabled == '0') {
              return h('span', {
                style: {
                  color: '#ed4014'
                }
              }, '未激活')
            }
          }
        },
        /*{
          title: '缩略图URI',
          key: 'thumbnail_uri',
          align: 'center'
        },*/
        {
          title: '创建日期',
          width: 170,
          key: 'create_date'
        },
        {
          title: '操作',
          key: 'action',
          width: 120,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  size: 'small',
                  type: 'primary',
                  icon: 'md-create'
                },
                'class': {
                  'm-r-5px': true
                },
                on: {
                  click: () => {
                    this.openCompinfoForm('edit', params.row.id, params.row.type_id)
                  }
                }
              }),
              h('Poptip', {
                props: {
                  confirm: true,
                  transfer: true,
                  'word-wrap': true,
                  placement: 'top-end',
                  title: '您确定要删除此项吗？'
                },
                style: {},
                on: {
                  'on-ok': () => {
                    this.deleteCompinfo(params.row.id)
                  }
                }
              }, [
                h('Button', {
                  props: {
                    size: 'small',
                    type: 'error',
                    icon: 'md-trash'
                  }
                },)
              ])
            ]);
          }
        }
      ],

      exportToJsonModalVisible: false,
      importJsonModalVisible: false,
      compinfoSelectedJsonText: '',
      importJsonText: ''
    }
  },
  mounted() {
    this.loadCompinfos();
  },
  methods: {
    loadCompinfos() {
      this.loading = true
      this.$PnApi.CompinfoApi.getCompinfoByPage(this.pageIndex, this.pageSize, this.compinfoTypeId).then(result => {
        this.tableData = result.data.payload.list;
        this.pageTotal = result.data.payload.total;
        this.loading = false
      })
    },

    openCompinfoForm(type, id, type_id) {
      this.$refs.compinfoForm.init(type, id, type_id)
    },

    deleteCompinfo(id) {
      this.$PnApi.CompinfoApi.deleteCompinfo(id).then(result => {
        if (result.data.success) {
          this.loadCompinfos();
          this.$Message.success(result.data.message)
        }
      });
    },

    thumbnailPath(thumbnail_uri) {
      if (thumbnail_uri) {
        try {
          return require('../../../../components/functional/' + thumbnail_uri)
        } catch (e) {
          return ''
        }
      } else {
        return require('@/assets/image/thumbnail/thumbnail-default.png')
      }
    },

    exportCompinfo() {
      let compinfoSelected = this.$refs['compinfoTable'].getSelection();
      if (compinfoSelected.length == 0) {
        this.$Message.warning('请选择一条或多条组件信息数据')
      } else {
        this.compinfoSelectedJsonText = JSON.stringify(compinfoSelected);
        this.exportToJsonModalVisible = !this.exportToJsonModalVisible;
      }
    },

    copyCompinfoSelectedJsonText() {
      this.$PnUtil.copyToClipboard(this.compinfoSelectedJsonText);
      this.$Message.success('已将JSON数据复制至剪切板');
      this.exportToJsonModalVisible = false
    },

    importJson() {
      try {
        let json = JSON.parse(this.importJsonText);
        if (!Array.isArray(json)) {
          this.$Message.error('导入的必须是一个数组类型的JSON对象')
        }
        this.$PnApi.CompinfoApi.importCompinfoJson(this.importJsonText, this.compinfoTypeId).then(result => {
          if (result.data.success) {
            this.loadCompinfos();
            this.importJsonModalVisible = false;
            this.importJsonText = '';
            this.$Message.success(result.data.message)
          }
        })
      } catch (e) {
        this.$Message.error('导入的JSON数据格式不正确，无法进行解析')
      }

    }

  },
  computed: {}
}
</script>

<style scoped>
.ivu-divider-horizontal {
  margin: 10px 0px;
}
</style>
